<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="{ span: 8 }"
    autoComplete="off"
    class="jibenxinxi"
  >
    <a-row>
      <a-col :span="8">
        <a-form-item label="真实姓名" name="name">
          <a-input v-model:value="formState.name" size="large"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="性别" name="genderEnum">
          <a-select v-model:value="formState.genderEnum" size="large">
            <a-select-option value="male">男</a-select-option>
            <a-select-option value="female">女</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="出生日期" name="dateOfBirth">
          <a-date-picker
            v-model:value="formState.dateOfBirth"
            size="large"
            :showToday="false"
            :disabled-date="disabledUserAgeDate"
            style="width: 100%"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="参加工作日期" class="has-min-width">
          <!-- name="workStartYear" -->
          <a-date-picker
            style="width: 100%"
            size="large"
            picker="year"
            v-model:value="formState.workStartYear"
            :disabled-date="disabledDateWorkStartYear"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="微信号" name="wechat">
          <a-input size="large" placeholder="请填写微信号" v-model:value="formState.wechat" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="邮箱" name="email">
          <a-input size="large" placeholder="请填写邮箱" v-model:value="formState.email" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <!-- name="currentAreacode" -->
        <a-form-item label="当前省份" name="currentAreacode">
          <a-select
            size="large"
            :fieldNames="{ label: 'name', value: 'id', options: 'options' }"
            :options="_provinceList"
            v-model:value="formState.currentAreacode"
            placeholder="请选择"
            @change="AreaChange"
            allowClear
          >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8" v-if="formState.currentAreacode">
        <a-form-item label="当前城市" name="currentStreetCode">
          <a-select
            size="large"
            :fieldNames="{ label: 'name', value: 'id', options: 'options' }"
            :options="_cityList"
            v-model:value="formState.currentStreetCode"
            placeholder="请选择"
            allowClear
          >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="当前薪资" class="has-min-width">
          <CurrentSalaryInput v-model:value="formState.currentSalary" />
        </a-form-item>
      </a-col>
      <a-form-item
        label="常住地址"
        name="detailedLocation"
        class="has-max-width"
        :labelCol="{ span: 8 }"
        style="width: 70%"
      >
        <!-- <MapInput
          size="large"
          v-model:value="formState.detailedLocation"
          placeholder="填写每天出发地，比如西二旗、国贸、西直门"
          v-model:detailAddress="formState.houseNumber"
          city="赤峰市"
        /> -->
        <a-input
          size="large"
          placeholder="请填写常住地址"
          v-model:value="formState.detailedLocation"
          :maxlength="100"
        />
      </a-form-item>
      <a-col :span="24" class="btn-box">
        <a-form-item>
          <a-button size="large" @click="emit('close')">取消</a-button>
          <a-button size="large" type="primary" @click="onSubmit">保存</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
// import MapInput from '@/components/MapInput/index.vue';
// import InlineDoubbleInput from '@/components/InlineDoubbleInput.vue';
import ResumeService from '@/api/resume';
import _ from 'lodash';
import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { jibenxinxiRules as rules } from './config';
import CommonService from '@/api/common';
import dayjs from 'dayjs';
import { disabledUserAgeDate, disabledDateWorkStartYear } from '@/utils/util';
import { emitter } from '@/hooks/useMitt';
import CurrentSalaryInput from '@/views/register/components/CurrentSalaryInput.vue';

const props = defineProps<{ value: any }>();
const emit = defineEmits(['finish', 'close']);
const route = useRoute();
const { seekerId } = route.params;

const defaultFormState = {
  genderEnum: 'male',
  dateOfBirth: null,
  workStartYear: null,
  currentAreacode: null,
  currentStreetCode: null,
  detailedLocation: '',
  // detailedLocation: {
  //   address: undefined,
  //   lng: 0,
  //   lat: 0,
  //   city: '',
  // } as any,
  houseNumber: '',
  currentSalary: {
    salary: 0,
    salaryMonth: 0,
  },
  name: null,
  wechat: null,
  email: null,
};

const formState = reactive(defaultFormState);
const formRef = ref();
const areaList = ref<any[]>([]);
// const StreetList = ref([]);

const _provinceList = computed(() => {
  return areaList.value?.filter((t) => t.level === 1);
});
const _cityList = computed(() => {
  return areaList.value?.filter((t) => t.parentId === formState.currentAreacode);
});

async function onSubmit() {
  try {
    await formRef.value?.validate();
    const params: any = {
      id: seekerId,
      ...formState,
    };
    params.longitude = params.detailedLocation.lng;
    params.latitude = params.detailedLocation.lat;
    // params.detailedLocation = params.detailedLocation.address;
    params.salaryNum = params.currentSalary?.salaryMonth;
    params.currentSalary = params.currentSalary?.salary;
    params.workStartYear = params.workStartYear?.format('YYYY');
    params.dateOfBirth = params.dateOfBirth?.format('YYYY-MM-DD');

    const resp = await ResumeService.editSeekerInfo(params);
    if (resp.code === 200) {
      message.success('操作成功');
      emit('finish');
      emitter.emit('RESUME_UPDATE');
    } else {
      message.error(resp?.msg || '操作失败');
    }
  } catch (error) {
    console.log(error);
  }
}

function initFormData() {
  const keys = Object.keys(defaultFormState);
  const _propsValue = props.value;
  // selectStreetListByAreaId(_propsValue.currentAreacode);
  keys.forEach((key) => {
    if (key === 'dateOfBirth') {
      if (_propsValue?.['dateOfBirth']) {
        (formState as any)['dateOfBirth'] = dayjs(_propsValue['dateOfBirth']);
      } else {
        (formState as any)['dateOfBirth'] = dayjs('1995-01-01');
      }
    } else if (key === 'workStartYear') {
      if (_propsValue?.['workStartYear']) {
        const workStartYear: any = _propsValue.workStartYear;
        (formState as any)['workStartYear'] = dayjs(`${workStartYear}`);
      }
    } else if (key === 'currentSalary') {
      if (_propsValue?.['currentSalary'] || _propsValue?.['salaryNum']) {
        (formState as any)['currentSalary'] = {
          salary: _.floor(_propsValue?.['currentSalary'], 1) || 0,
          salaryMonth: _propsValue?.['salaryNum'] || 0,
        };
      }
    } else {
      if (_propsValue?.[key]) {
        (formState as any)[key] = _propsValue[key];
      }
    }
  });
}

async function selectAreaListFromRedis() {
  try {
    const resp = await CommonService.selectAreaListFromRedis();
    if (resp.code === 200) {
      areaList.value = resp.data;
    }
  } catch (error) {
    console.log(error);
  }
}

// async function selectStreetListByAreaId(pid: any) {
//   try {
//     const resp = await CommonService.selectStreetListByAreaId(pid);
//     if (resp.code === 200) {
//       StreetList.value = resp.data;
//     }
//   } catch (error) {
//     console.log(error);
//   }
// }

function AreaChange(val: any) {
  formState.currentStreetCode = null;
  // if (val) {
  //   selectStreetListByAreaId(val);
  // }
}
onMounted(() => {
  selectAreaListFromRedis();
  initFormData();
});
</script>

<style lang="less" scoped>
.jibenxinxi {
  :deep {
    .ant-form-item-label {
      min-width: 78px;
    }
  }

  .has-max-width {
    :deep {
      .ant-form-item-label {
        max-width: 122px;
      }
    }
  }
  .has-min-width {
    :deep {
      .ant-form-item-label {
        min-width: 110px;
      }
    }
  }
}
</style>
